<template>
  <el-popover v-model="visibility" placement="bottom" trigger="click">
    <!-- 级联 -->
    <Cascader
      v-model="list"
      :url="col.url"
      :params="col.params"
      :return-data="col.returnData"
      :props-options="col.props"
      :row-key="col.value || scope.column.property"
      @change="changeCascader"
    />
    <div slot="reference">
      {{ col.label }}
      <i v-if="!col.disable" class="el-icon-arrow-down" />
    </div>
  </el-popover>
</template>
<script>
import Cascader from './Cascader.vue';
import { checkIsEmpty } from '@/utils/common';
export default {
  components: { Cascader },
  props: {
    col: {
      type: Object,
      default: () => {
        return {};
      },
    },
    value: {
      type: String,
      default: '',
    },
    rowKey: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      visibility: false,
      list: '',
    };
  },
  watch: {
    value: {
      handler(v) {
        if (!checkIsEmpty(v)) {
          this.list = v;
        } else {
          this.list = '';
        }
      },
    },
  },
  methods: {
    changeCascader(v) {
      this.$nextTick(() => {
        this.visibility = false;
        this.$emit('changeSearch', v);
        this.$emit('input', this.list);
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
